<template>
  <div class="weekreport">
    <!-- 周报 -->
    <div class="topstatus">
      <div class="box2">
        <el-input v-model="page.weeklyName" placeholder="周报名称"></el-input>
      </div>
      <div class="block">
        <el-date-picker
          class="blockPicker"
          v-model="page.creatTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="创建日期"
        >
        </el-date-picker>
      </div>
      <button class="check" @click="queryBtn">查询</button>
      <button class="check1" @click="addEditBtn">创建</button>
    </div>
    <el-container class="bottominfo">
      <!-- 周报列表 -->
      <el-aside class="lefttable" style="width: 43%; margin-right: 20px">
        <el-table
          v-loading="loading"
          :data="tableData"
          @row-click="tableShowClick"
          style="width: 100%; margin: 0 auto"
          highlight-current-row
          :header-cell-style="{
            textAlign: 'center',
            background: '#fff',
            color: '#333',
            fontWeight: '400',
            height: '55px',
            fontSize: '14px',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="weeklyName" label="周报名称">
          </el-table-column>
          <el-table-column label="提交人">
            <template slot-scope="scope">
              <img
                v-if="scope.row.createUrl"
                :src="scope.row.createUrl"
                alt=""
              />
              <p>{{ scope.row.createName }}</p>
            </template>
          </el-table-column>
          <el-table-column label="审核人">
            <template slot-scope="scope">
              <div v-if="scope.row.reviewerVo">
                <div v-for="(item, index) in scope.row.reviewerVo" :key="index">
                  <img :src="item.userUrl" alt="" />
                  <p>{{ item.userName }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createtime" label="提交时间">
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.weeklyStatus === 3" class="completestatus"
                >已审核</span
              >
              <span v-if="scope.row.weeklyStatus === 2" class="ingstatus"
                >待审核</span
              >
              <span v-if="scope.row.weeklyStatus === 1" class="nonestatus"
                >待提交</span
              >
              <span v-if="scope.row.weeklyStatus === 4" class="completestatus1"
                >审核未通过</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center" class="pagbox">
          <el-pagination
            v-model="page"
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="page.pageSize"
            :current-page="page.page"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-aside>
      <!-- 周报详情 -->
      <el-aside class="rightinfo">
        <div class="timechoose" style="height: 55px; line-height: 55px">
          周报详情
          <div class="btnbox">
            <div v-if="WeeklyDetails !== null">
              <button
                class="edit"
                v-if="
                  (WeeklyDetails.weeklyStatus === 1 ||
                    WeeklyDetails.weeklyStatus === 4) &&
                  parseInt(WeeklyDetails.createId) === userId
                "
                @click="editShenHeBtn"
                v-preventReClick
              >
                提交审核
              </button>
              <button
                class="edit"
                v-if="
                  (WeeklyDetails.weeklyStatus === 1 ||
                    WeeklyDetails.weeklyStatus === 4) &&
                  parseInt(WeeklyDetails.createId) === userId
                "
                @click="editShowBtn"
              >
                编辑
              </button>
            </div>
          </div>
        </div>
        <div v-if="WeeklyDetails === null" class="weekreportinfoBox">
          暂无周报详情信息
        </div>
        <!-- 周报详情 -->
        <div v-else class="weekreportinfo">
          <div class="topinfo">
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  <div class="uper">
                    <div class="uperintro">
                      <span>提交人:</span>
                    </div>
                    <div class="uperinfo">
                      <img
                        v-if="WeeklyDetails.createUrl"
                        :src="WeeklyDetails.createUrl"
                        alt=""
                      />
                      <p>{{ WeeklyDetails.createName }}</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="uper">
                    <div class="uperintro">
                      <span>审核人:</span>
                    </div>
                    <div
                      v-if="WeeklyDetails.reviewerVo.length !== 0"
                      class="uperinfo"
                    >
                      <img :src="WeeklyDetails.reviewerVo[0].userUrl" alt="" />
                      <p>{{ WeeklyDetails.reviewerVo[0].userName }}</p>
                    </div>
                  </div>
                </td>
                <td width="233">
                  <span>名称:</span><span>{{ WeeklyDetails.weeklyName }}</span>
                </td>
                <td>
                  <span>提交时间:</span
                  ><span>{{ WeeklyDetails.createtime }}</span>
                </td>
                <td>
                  <span>审核状态:</span>
                  <span
                    v-if="WeeklyDetails.weeklyStatus === 3"
                    class="completestatus"
                    >已审核</span
                  >
                  <span
                    v-if="WeeklyDetails.weeklyStatus === 2"
                    class="ingstatus"
                    >待审核</span
                  >
                  <span
                    v-if="WeeklyDetails.weeklyStatus === 1"
                    class="nonestatus"
                    >待提交</span
                  >
                  <span
                    v-if="WeeklyDetails.weeklyStatus === 4"
                    class="completestatus1"
                    >审核未通过</span
                  >
                </td>
              </tr>
            </table>
          </div>
          <div class="discreaption">
            <p class="distit" style="font-size: 14px">本周工作总结</p>
            <div class="disbox">
              {{ WeeklyDetails.summary }}
            </div>
          </div>
          <div class="weekmission">
            <p class="distit" style="font-size: 14px">本周关联任务</p>
            <div
              class="disbox"
              v-for="(item, index) in WeeklyDetails.weekList"
              :key="index"
            >
              <div class="missioninfo">
                <div class="leftname">
                  <p style="font-size: 14px; width: 100%; height: 40%">
                    {{ item.taskName }}
                  </p>
                  <p style="font-size: 12px; width: 100%; height: 40%">
                    <span>负责人：</span><span>{{ item.chargeName }}</span>
                  </p>
                </div>
                <div class="righttime">
                  <div>
                    <span v-if="item.status === 3" class="ingstatus"
                      >进行中</span
                    >
                    <span v-if="item.status === 1" class="nonestatus"
                      >待开始</span
                    >
                    <span v-if="item.status === 4" class="completestatus"
                      >已完成</span
                    >
                  </div>
                  <p>
                    结束时间：<span>{{ item.endDate }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="discreaption">
            <p class="distit" style="font-size: 14px">下周工作计划</p>
            <div class="disbox">
              {{ WeeklyDetails.plan }}
            </div>
          </div>
          <div class="weekmission">
            <p class="distit" style="font-size: 14px">下周关联任务</p>
            <div
              class="disbox"
              v-for="(item, index) in WeeklyDetails.nextWeekList"
              :key="index"
            >
              <div class="missioninfo">
                <div class="leftname">
                  <p style="font-size: 14px; width: 100%; height: 40%">
                    {{ item.taskName }}
                  </p>
                  <p style="font-size: 12px; width: 100%; height: 40%">
                    <span>负责人：</span><span>{{ item.chargeName }}</span>
                  </p>
                </div>
                <div class="righttime">
                  <div>
                    <span v-if="item.status === 3" class="ingstatus"
                      >进行中</span
                    >
                    <span v-if="item.status === 1" class="nonestatus"
                      >待开始</span
                    >
                    <span v-if="item.status === 4" class="completestatus"
                      >已完成</span
                    >
                  </div>
                  <p>
                    结束时间：<span>{{ item.endDate }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            v-if="selectUserType === 1 && WeeklyDetails.weeklyStatus === 2"
            class="confirmcalcle"
          >
            <button class="confirmup" @click="shenHeShowBtn">审核</button>
          </div>
        </div>
      </el-aside>
    </el-container>

    <!-- 审核弹层 -->
    <el-dialog
      width="500px"
      :visible.sync="shenHeShow"
      :close-on-press-escape="false"
      top="25vh"
      style="padding: 0"
    >
      <div class="DioBox">
        <div class="DiaTopBox">
          审核
          <i class="el-icon-close closeBtn" @click="shenHeShow = false"></i>
        </div>
        <div class="DiaBodyBox">
          <p>原因说明</p>
          <textarea
            type="textarea"
            class="disbox"
            v-model="confirmup.reason"
            placeholder="请输入审核原因"
          />
        </div>
        <div class="btnbox" style="padding-left: 150px">
          <button class="cancle" @click="reviewReturn()">退回</button>
          <button class="edit" @click="confirmupBtn">通过</button>
        </div>
      </div>
    </el-dialog>

    <!-- 创建周报弹框 -->
    <el-dialog
      width="70%"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="establishShow"
      :close-on-press-escape="false"
      top="12vh"
    >
      <div class="rightinfo">
        <div class="timechoose">
          <div class="timechooser">创建周报</div>
        </div>
        <div class="weekreportinfo">
          <div class="topinfo">
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  <div class="uper">
                    <div class="uperintro">
                      <span>提交人:</span>
                    </div>
                    <div class="uperinfo">
                      <img :src="addUserUrl" alt="" />
                      <p>{{ addUserName }}</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="uper">
                    <div class="uperintro">
                      <span>审核人:</span>
                    </div>
                    <div class="uperinfo">
                      <img
                        style="top: 5px; box-shadow: 0 0 0"
                        v-if="chooseMission5List.length === 0"
                        @click="examinerBtn"
                        src="@/assets/missionerplus.png"
                        alt=""
                      />
                      <img
                        v-else
                        @click="chooseMissioner = true"
                        :src="chooseMission5List[0].userUrl"
                        alt=""
                      />
                      <p v-if="chooseMission5List.length !== 0">
                        {{ chooseMission5List[0].userName }}
                      </p>
                    </div>
                  </div>
                </td>
                <td>
                  <span>名称:</span>
                  <input
                    type="text"
                    maxlength="20"
                    v-model="addWeeklyDto.wname"
                    placeholder="请输入周报名称"
                  />
                </td>
                <td>
                  <el-date-picker
                    class="blockPicker"
                    v-model="value"
                    readonly
                    type="datetime"
                    placeholder="创建日期"
                  >
                  </el-date-picker>
                </td>
                <td>
                  <span>审核状态:</span>
                  <span class="statusinfo"> 未审核 </span>
                </td>
              </tr>
            </table>
          </div>
          <div class="discreaption">
            <p class="distit">本周工作总结</p>
            <input
              type="textarea"
              class="disbox"
              v-model="addWeeklyDto.wsummary"
              placeholder="请输入本周工作总结"
            />
          </div>
          <div class="weekmission">
            <p class="distit">本周关联任务</p>
            <div class="plus" @click="chooseMissionBtn1">+</div>
            <div
              class="disbox"
              v-for="(item, index) in chooseMission1List"
              :key="index"
            >
              <div class="missioninfo">
                <div class="leftname">
                  <p>{{ item.taskName }}</p>
                  <p>
                    <span>负责人：</span><span>{{ item.chargeName }}</span>
                  </p>
                </div>
                <div class="righttime">
                  <span v-show="item.status === 3" class="ingstatus"
                    >进行中</span
                  >
                  <span v-show="item.status === 1" class="nonestatus"
                    >待开始</span
                  >
                  <span v-show="item.status === 4" class="completestatus"
                    >已完成</span
                  >
                  <p>
                    结束时间：<span>{{ item.endDate }}</span>
                  </p>
                </div>
              </div>
              <div class="btn">
                <img
                  src="@/assets//quxiaolianjie@2x.png"
                  title="取消关联"
                  @click="delBtn1(item)"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="discreaption">
            <p class="distit" style="margin-top: 30px">下周工作计划</p>
            <input
              type="textarea"
              class="disbox"
              v-model="addWeeklyDto.wplan"
              placeholder="请输入下周工作计划"
            />
          </div>
          <div class="weekmission">
            <p class="distit">下周关联任务</p>
            <div class="plus" @click="chooseMissionBtn2">+</div>
            <div
              class="disbox"
              v-for="(item, index) in chooseMission2List"
              :key="index"
            >
              <div class="missioninfo">
                <div class="leftname">
                  <p>{{ item.taskName }}</p>
                  <p>
                    <span>负责人：</span><span>{{ item.chargeName }}</span>
                  </p>
                </div>
                <div class="righttime">
                  <span v-show="item.status === 3" class="ingstatus"
                    >进行中</span
                  >
                  <span v-show="item.status === 1" class="nonestatus"
                    >待开始</span
                  >
                  <span v-show="item.status === 4" class="completestatus"
                    >已完成</span
                  >
                  <p>
                    结束时间：<span>{{ item.endDate }}</span>
                  </p>
                </div>
              </div>
              <div class="btn">
                <img
                  src="@/assets//quxiaolianjie@2x.png"
                  title="取消关联"
                  @click="delBtn2(item)"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
        <div class="btnbox1">
          <div class="btnbox">
            <button class="cancle" @click="canclecreate()">取消</button>
            <button class="edit" @click="changeEdit()">提交</button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 编辑周报弹框 -->
    <el-dialog
      width="70%"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="editShow"
      :close-on-press-escape="false"
      top="12vh"
    >
      <div class="rightinfo">
        <div class="timechoose">
          <div class="timechooser">编辑周报</div>
        </div>
        <div class="weekreportinfo">
          <div class="topinfo">
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  <div class="uper">
                    <div class="uperintro">
                      <span>提交人:</span>
                    </div>
                    <div class="uperinfo">
                      <img :src="createUrl" alt="" />
                      <p>{{ createName }}</p>
                    </div>
                  </div>
                </td>
                <td>
                  <div class="uper">
                    <div class="uperintro">
                      <span>审核人:</span>
                    </div>
                    <div class="uperinfo">
                      <img
                        style="top: 5px; box-shadow: 0 0 0"
                        v-if="chooseMission5List1.length === 0"
                        @click="examinerBtn1"
                        src="@/assets/missionerplus.png"
                        alt=""
                      />
                      <img
                        v-else
                        @click="examinerBtn1"
                        :src="chooseMission5List1[0].userUrl"
                        alt=""
                      />
                      <p v-if="chooseMission5List1.length !== 0">
                        {{ chooseMission5List1[0].userName }}
                      </p>
                    </div>
                  </div>
                </td>
                <td>
                  <span>名称:</span>
                  <input
                    type="text"
                    maxlength="20"
                    v-model="updateWeeklyDto.wname"
                    placeholder="请输入周报名称"
                  />
                </td>
                <td>
                  <el-date-picker
                    v-model="value"
                    readonly
                    type="date"
                    placeholder="创建日期"
                  >
                  </el-date-picker>
                </td>
                <td>
                  <span>审核状态:</span>
                  <div v-if="WeeklyDetails !== null">
                    <span
                      v-if="WeeklyDetails.weeklyStatus === 3"
                      class="completestatus"
                      >已审核</span
                    >
                    <span
                      v-if="WeeklyDetails.weeklyStatus === 2"
                      class="ingstatus"
                      >待审核</span
                    >
                    <span
                      v-if="WeeklyDetails.weeklyStatus === 1"
                      class="nonestatus"
                      >待提交</span
                    >
                    <span
                      v-if="WeeklyDetails.weeklyStatus === 4"
                      class="completestatus1"
                      >审核未通过</span
                    >
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <div class="discreaption">
            <p class="distit">本周工作总结</p>
            <input
              type="textarea"
              v-model="updateWeeklyDto.wsummary"
              class="disbox"
              placeholder="请输入本周工作总结"
            />
          </div>
          <div class="weekmission">
            <p class="distit">本周关联任务</p>
            <div class="plus" @click="chooseMissionBtn3">+</div>
            <div
              class="disbox"
              v-for="(item, index) in chooseMission3List"
              :key="index"
            >
              <div class="missioninfo">
                <div class="leftname">
                  <p>{{ item.taskName }}</p>
                  <p>
                    <span>负责人：</span><span>{{ item.chargeName }}</span>
                  </p>
                </div>
                <div class="righttime">
                  <span v-if="item.status === 3" class="ingstatus">进行中</span>
                  <span v-if="item.status === 1" class="nonestatus"
                    >待开始</span
                  >
                  <span v-if="item.status === 4" class="completestatus"
                    >已完成</span
                  >
                  <p>
                    结束时间：<span>{{ item.endDate }}</span>
                  </p>
                </div>
              </div>
              <div class="btn">
                <img
                  src="@/assets//quxiaolianjie@2x.png"
                  title="取消关联"
                  @click="delBtn3(item)"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="discreaption">
            <p class="distit" style="margin-top: 30px">下周工作计划</p>
            <input
              type="textarea"
              v-model="updateWeeklyDto.wplan"
              class="disbox"
              placeholder="请输入下周工作计划"
            />
          </div>
          <div class="weekmission">
            <p class="distit">下周关联任务</p>
            <div class="plus" @click="chooseMissionBtn4">+</div>
            <div
              class="disbox"
              v-for="(item, index) in chooseMission4List"
              :key="index"
            >
              <div class="missioninfo">
                <div class="leftname">
                  <p>{{ item.taskName }}</p>
                  <p>
                    <span>负责人：</span><span>{{ item.chargeName }}</span>
                  </p>
                </div>
                <div class="righttime">
                  <span v-if="item.status === 3" class="ingstatus">进行中</span>
                  <span v-if="item.status === 1" class="nonestatus"
                    >待开始</span
                  >
                  <span v-if="item.status === 4" class="completestatus"
                    >已完成</span
                  >
                  <p>
                    结束时间：<span>{{ item.endDate }}</span>
                  </p>
                </div>
              </div>
              <div class="btn">
                <img
                  src="@/assets//quxiaolianjie@2x.png"
                  title="取消关联"
                  @click="delBtn4(item)"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
        <div class="btnbox1">
          <div class="btnbox">
            <button class="cancle" @click="canclecreate1()">取消</button>
            <button class="edit" @click="changeEdit1()">提交</button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 新增选择审核人 -->
    <el-dialog :visible.sync="chooseMissioner" :show-close="false" center>
      <div class="diaheader">请选择审核人</div>
      <div class="searchbox">
        <div class="inputborder">
          <input
            type="text"
            placeholder="搜索审核人"
            v-model="addSearchShrName"
            class="search"
            style="border-radius: 25px"
          />
          <i class="el-icon-search icon" @click="addSearchShr"></i>
        </div>
      </div>
      <div class="diacontent" style="text-align: left">
        <ul>
          <li
            @click="clickInput"
            v-for="(item, index) in examinerList"
            :key="index"
          >
            <span class="memberName">{{ item.userName }}</span>
            <img :src="item.userUrl" alt="" />
            <input
              class="checkBoxs"
              name="charge"
              v-model="item.checked"
              type="radio"
              @click="inputClickEvent($event)"
              @change="getboxValue5($event, item)"
            />
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chooseMissioner = false">取 消</el-button>
        <el-button type="primary" @click="chooseMissioner = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑选择审核人 -->
    <el-dialog :visible.sync="chooseMissioner1" :show-close="false" center>
      <div class="diaheader">请选择审核人</div>
      <div class="searchbox">
        <div class="inputborder">
          <input
            type="text"
            placeholder="搜索审核人"
            class="search"
            v-model="editSearchName"
            style="border-radius: 25px"
          />
          <i class="el-icon-search icon" @click="editSearchShr"></i>
        </div>
      </div>
      <div class="diacontent" style="text-align: left">
        <ul>
          <li
            @click="clickInput"
            v-for="(item, index) in examinerList1"
            :key="index"
          >
            <span class="memberName">{{ item.userName }}</span>
            <img :src="item.userUrl" alt="" />
            <input
              class="checkBoxs"
              name="charge"
              v-model="item.checked"
              type="radio"
              value="true"
              @click="inputClickEvent($event)"
              @change="getboxValue6($event, item)"
            />
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chooseMissioner1 = false">取 消</el-button>
        <el-button type="primary" @click="chooseMissioner1 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 选择创建周报本周关联任务 -->
    <el-dialog
      :visible.sync="chooseMission1"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
      <div class="diaheader">关联任务</div>
      <div class="searchbox">
        <div class="inputborder">
          <input
            type="text"
            placeholder="搜索任务"
            v-model="searchName1"
            class="search"
            style="border-radius: 25px"
          />
          <i class="el-icon-search icon" @click="searchEvent1"></i>
        </div>
      </div>
      <p style="font-size: 14px; color: #333; margin: 10px 10px 10px 20px">
        任务列表
      </p>
      <div class="diacontent" style="text-align: left">
        <ul>
          <li
            @click="clickInput"
            v-for="(item, index) in relationTask1"
            :key="index"
          >
            <div class="missioninfo">
              <div class="leftname">
                <p style="font-size: 14px">{{ item.taskName }}</p>
                <p>
                  <span>负责人：</span><span>{{ item.chargeName }}</span>
                </p>
              </div>
              <div class="righttime">
                <p v-if="item.status === 3" class="ingstatus">进行中</p>
                <p v-if="item.status === 1" class="nonestatus">待开始</p>
                <p v-if="item.status === 4" class="completestatus">已完成</p>
                <p>
                  结束时间：<span>{{ item.endDate }}</span>
                </p>
              </div>
            </div>
            <input
              class="checkBoxs"
              name="charge"
              v-model="item.checked"
              type="checkbox"
              @click="inputClickEvent($event)"
              @change="getboxValue1($event, item)"
            />
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onclose1">取 消</el-button>
        <el-button type="primary" @click="chooseMission1 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 选择创建周报下周关联任务 -->
    <el-dialog
      :visible.sync="chooseMission2"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
      <div class="diaheader">关联任务</div>
      <div class="searchbox">
        <div class="inputborder">
          <input
            type="text"
            placeholder="搜索任务"
            v-model="searchName2"
            class="search"
            style="border-radius: 25px"
          />
          <i class="el-icon-search icon" @click="searchEvent2"></i>
        </div>
      </div>
      <p style="font-size: 14px; color: #333; margin: 10px 10px 10px 20px">
        任务列表
      </p>
      <div class="diacontent" style="text-align: left">
        <ul>
          <li
            @click="clickInput"
            v-for="(item, index) in relationTask2"
            :key="index"
          >
            <div class="missioninfo">
              <div class="leftname">
                <p style="font-size: 14px">{{ item.taskName }}</p>
                <p>
                  <span>负责人：</span><span>{{ item.chargeName }}</span>
                </p>
              </div>
              <div class="righttime">
                <p v-if="item.status === 3" class="ingstatus">进行中</p>
                <p v-if="item.status === 1" class="nonestatus">待开始</p>
                <p v-if="item.status === 4" class="completestatus">已完成</p>
                <p>
                  结束时间：<span>{{ item.endDate }}</span>
                </p>
              </div>
            </div>
            <input
              class="checkBoxs"
              name="charge"
              v-model="item.checked"
              type="checkbox"
              @click="inputClickEvent($event)"
              @change="getboxValue2($event, item)"
            />
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onclose2">取 消</el-button>
        <el-button type="primary" @click="chooseMission2 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 选择编辑周报本周关联任务 -->
    <el-dialog
      :visible.sync="chooseMission3"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
      <div class="diaheader">关联任务</div>
      <div class="searchbox">
        <div class="inputborder">
          <input
            type="text"
            placeholder="搜索任务"
            v-model="searchName3"
            class="search"
            style="border-radius: 25px"
          />
          <i class="el-icon-search icon" @click="searchEvent3"></i>
        </div>
      </div>
      <p style="font-size: 14px; color: #333; margin: 10px 10px 10px 20px">
        任务列表
      </p>
      <div class="diacontent" style="text-align: left">
        <ul>
          <li
            @click="clickInput"
            v-for="(item, index) in relationTask3"
            :key="index"
          >
            <div class="missioninfo">
              <div class="leftname">
                <p style="font-size: 14px">{{ item.taskName }}</p>
                <p>
                  <span>负责人：</span><span>{{ item.chargeName }}</span>
                </p>
              </div>
              <div class="righttime">
                <p v-if="item.status === 3" class="ingstatus">进行中</p>
                <p v-if="item.status === 1" class="nonestatus">待开始</p>
                <p v-if="item.status === 4" class="completestatus">已完成</p>
                <p>
                  结束时间：<span>{{ item.endDate }}</span>
                </p>
              </div>
            </div>
            <input
              class="checkBoxs"
              name="charge"
              v-model="item.checked"
              type="checkbox"
              @click="inputClickEvent($event)"
              @change="getboxValue3($event, item)"
            />
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chooseMission3 = false">取 消</el-button>
        <el-button type="primary" @click="chooseMission3 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 选择编辑周报下周关联任务 -->
    <el-dialog
      :visible.sync="chooseMission4"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
      <div class="diaheader">关联任务</div>
      <div class="searchbox">
        <div class="inputborder">
          <input
            type="text"
            placeholder="搜索任务"
            v-model="searchName4"
            class="search"
            style="border-radius: 25px"
          />
          <i class="el-icon-search icon" @click="searchEvent4"></i>
        </div>
      </div>
      <p style="font-size: 14px; color: #333; margin: 10px 10px 10px 20px">
        任务列表
      </p>
      <div class="diacontent" style="text-align: left">
        <ul>
          <li
            @click="clickInput"
            v-for="(item, index) in relationTask4"
            :key="index"
          >
            <div class="missioninfo">
              <div class="leftname">
                <p style="font-size: 14px">{{ item.taskName }}</p>
                <p>
                  <span>负责人：</span><span>{{ item.chargeName }}</span>
                </p>
              </div>
              <div class="righttime">
                <p v-if="item.status === 3" class="ingstatus">进行中</p>
                <p v-if="item.status === 1" class="nonestatus">待开始</p>
                <p v-if="item.status === 4" class="completestatus">已完成</p>
                <p>
                  结束时间：<span>{{ item.endDate }}</span>
                </p>
              </div>
            </div>
            <input
              class="checkBoxs"
              name="charge"
              v-model="item.checked"
              type="checkbox"
              @click="inputClickEvent($event)"
              @change="getboxValue4($event, item)"
            />
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chooseMission4 = false">取 消</el-button>
        <el-button type="primary" @click="chooseMission4 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getSelectWeekly, getSelectWeeklyAll, getSelectPersonal, getSelectAllTask, addWeekly, getSelectAllReviewerUser, reviewerWeekly, getSelectUserType, updateWeekly, updateStatus} from '@/api/task/task.js';
export default {
  name: 'week-report',
  data() {
    return {
      page: {
        page: 1,
        pageSize: 6,
        weeklyName: '', // 周报名称
        creatTime: '' // 创建时间
      },
      total: null, // 周报总数
      editShenHeData: {
        buserId: null, // 周报的useid
        id: 0, // 周报id
        status: 0, // 修改后状态
        userId: parseInt(sessionStorage.getItem('userid')) // 登录人id
      }, // 修改审核状态数据按钮
      userName: sessionStorage.getItem('username'), // 用户名称
      loading: true,
      addUserName: '', // 新增提交人名称
      addUserUrl: '', // 新增提交人头像
      createUrl: '', // 编辑提交人头像
      createName: '', // 编辑提交人名字
      userId: parseInt(sessionStorage.getItem('userid')), // 登录人id
      tableData: [], // 周报列表
      WeeklyDetails: null, // 周报详情
      selectUserType: null, // 当前登录人是否为审核人 1-是 2-否

      establishShow: false, // 创建周报弹层控制
      editShow: false, // 编辑周报弹层控制
      shenHeShow: false, // 审核弹层控制
      chooseMission1: false, // 创建周报本周关联任务弹层控制
      chooseMission1List: [], // 创建周报本周关联任务已选
      chooseMission2: false, // 创建周报下周关联任务弹层控制
      chooseMission2List: [], // 创建周报下周关联任务已选
      chooseMission3: false, // 编辑周报本周关联任务弹层控制
      chooseMission3List: [], // 编辑周报本周关联任务已选
      chooseMission4: false, // 编辑周报下周关联任务弹层控制
      chooseMission4List: [], // 编辑周报下周关联任务已选
      chooseMissioner: false, // 新增审核人弹层控制
      chooseMissioner1: false, // 编辑审核人弹层控制
      examinerList: [], // 创建周报审核人列表
      examinerList1: [], // 编辑周报审核人列表
      chooseMission5List: [], // 创建周报已选审核人列表
      chooseMission5List1: [], // 编辑周报已选审核人列表
      addSearchShrName: '', // 新增审核人搜索内容
      editSearchName: '', // 编辑审核人搜索内容
      searchName1: '', // 创建周报本周关联任务搜索内容
      searchName2: '', // 创建周报下周关联任务搜索内容
      searchName3: '', // 编辑周报本周关联任务搜索内容
      searchName4: '', // 编辑周报下周关联任务搜索内容
      addWeeklyDto: { // 新增周报
        nextweektastList: [], // 下周关联任务
        wcreateid: parseInt(sessionStorage.getItem('userid')), // 创建人
        weeklycheckedList: [], // 审核人列表
        weektastList: [], // 本周关联任务
        wname: '', // 标题
        wplan: '', // 下周工作计划
        wsummary: '' // 本周工作总结
      },
      updateWeeklyDto: { // 编辑周报
        id: 0, // 周报id
        nextweektastList: [], // 下周关联任务
        weeklycheckedList: [], // 审核人
        weektastList: [], // 本周关联任务
        wname: '', // 标题
        wplan: '', // 下周工作计划
        wsummary: '' // 本周工作总结
      },
      value: '', // 当前日期
      relationTask1: [], // 关联任务
      relationTask2: [], // 关联任务
      relationTask3: [], // 关联任务
      relationTask4: [], // 关联任务
      confirmup: { // 审核数据
        buserId: 0, // 被审核人id
        reason: '', // 审核内容
        status: 0, // 审核状态 2-通过 3-不通过
        userId: parseInt(sessionStorage.getItem('userid')),
        weeklyId: 0 // 周报名称
      },
      weeklyNowId: null, // 当前周报id
      weekUserId: null // 当前周报userid

    };
  },
  created() {
    this.getSelectWeekly();
  },
  methods: {
    // 周报列表
    async getSelectWeekly() {
      const res = await getSelectWeekly(this.page);
      this.tableData = res.data;
      this.total = res.totalcount;
      this.loading = false;
      // console.log(this.tableData);
    },
    // 当前登录人类型
    async getSelectUserType() {
      const res = await getSelectUserType({userId: parseInt(sessionStorage.getItem('userid')), weeklyId: this.weeklyNowId});
      this.selectUserType = res.data;
      // console.log(this.selectUserType);
    },
    // 查询按钮
    async queryBtn() {
      this.page.page = 1;
      // console.log(this.page);
      const res = await getSelectWeekly(this.page);
      this.tableData = res.data;
      this.total = res.totalcount;
      // console.log(res);
    },
    // 提交审核按钮
    async editShenHeBtn() {
      this.editShenHeData.buserId = this.weekUserId;
      this.editShenHeData.id = this.weeklyNowId;
      this.editShenHeData.status = 2;
      const res = await updateStatus(this.editShenHeData);
      // console.log(res);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          message: '提交审核完成！',
          type: 'success'
        });
        this.getSelectUserType();
        this.getSelectWeekly();
        const {data} = await getSelectWeeklyAll({weelyId: this.weeklyNowId});
        this.WeeklyDetails = data;
        // console.log(this.WeeklyDetails);
      } else {
        this.$message({
          showClose: true,
          message: '提交审核失败，请稍后重试！',
          type: 'error'
        });
      }
    },
    // 审核按钮
    shenHeShowBtn() {
      this.confirmup.weeklyId = this.WeeklyDetails.id;
      this.confirmup.reason = '';
      this.confirmup.buserId = parseInt(this.WeeklyDetails.createId);
      this.editShenHeData.id = this.weeklyNowId;
      this.shenHeShow = true;
    },
    // 周报审核退回
    async reviewReturn() {
      this.editShenHeData.buserId = this.weekUserId;
      this.editShenHeData.status = 4;
      this.confirmup.status = 3;
      const res = await reviewerWeekly(this.confirmup);
      // console.log(res);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          message: '审核完成！',
          type: 'success'
        });
        // 刷新列表
        await updateStatus(this.editShenHeData);
        this.getSelectWeekly();
        const {data} = await getSelectWeeklyAll({weelyId: this.weeklyNowId});
        this.WeeklyDetails = data;
        this.shenHeShow = false;
      } else {
        this.$message({
          showClose: true,
          message: '审核失败，请稍后重试！',
          type: 'error'
        });
      }
    },
    // 周报审核通过
    async confirmupBtn() {
      this.editShenHeData.buserId = this.weekUserId;
      this.editShenHeData.status = 3;
      this.confirmup.status = 2;
      const res = await reviewerWeekly(this.confirmup);
      // console.log(res);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          message: '审核完成！',
          type: 'success'
        });
        await updateStatus(this.editShenHeData);
        this.getSelectWeekly();
        const {data} = await getSelectWeeklyAll({weelyId: this.weeklyNowId});
        this.WeeklyDetails = data;
        this.shenHeShow = false;
      } else {
        this.$message({
          showClose: true,
          message: '审核失败，请稍后重试！',
          type: 'error'
        });
      }
    },
    // 翻页
    handleCurrentChange(currentPage) {
      this.page.page = currentPage;
      this.getSelectWeekly();
    },
    // 表格点击事件
    async tableShowClick(val) {
      // console.log(val);
      this.weeklyNowId = val.id;
      this.weekUserId = parseInt(val.createId);
      this.getSelectUserType();
      const {data} = await getSelectWeeklyAll({weelyId: val.id});
      this.WeeklyDetails = data;
      console.log(this.WeeklyDetails);
    },
    // 查询创建周报本周关联任务
    async chooseMissionBtn1() {
      this.searchName1 = '';
      const {data} = await getSelectAllTask({userId: parseInt(sessionStorage.getItem('userid'))});
      this.relationTask1 = data;
      this.chooseMission1List.forEach(item => {
        this.relationTask1.forEach(i => {
          if (item.taskId === i.taskId) {
            i.checked = true;
          }
        });
      });
      // console.log(this.relationTask1);
      this.chooseMission1 = true;
    },
    // 查询创建周报下周关联任务
    async chooseMissionBtn2() {
      this.searchName2 = '';
      const {data} = await getSelectAllTask({userId: parseInt(sessionStorage.getItem('userid'))});
      this.relationTask2 = data;
      this.chooseMission2List.forEach(item => {
        this.relationTask2.forEach(i => {
          if (item.taskId === i.taskId) {
            i.checked = true;
          }
        });
      });
      // console.log(this.relationTask2);
      this.chooseMission2 = true;
    },
    // 创建周报本周关联任务选择事件
    getboxValue1(e, item) {
      if (e.target.checked) {
        this.chooseMission1List.push(item);
      } else {
        for (let i = 0; i < this.chooseMission1List.length; i++) {
          if (this.chooseMission1List[i].taskId === item.taskId) {
            this.chooseMission1List.splice(i, 1);
            break;
          }
        }
      }
      // console.log(this.chooseMission1List);
    },
    // 创建周报本周关联任务取消事件
    onclose1() {
      this.addWeeklyDto.weektastList = [];
      this.chooseMission1 = false;
    },
    delBtn1(item) {
      for (let i = 0; i < this.chooseMission1List.length; i++) {
        if (this.chooseMission1List[i].taskId === item.taskId) {
          this.chooseMission1List.splice(i, 1);
        }
      }
    },
    // 创建周报下周关联任务选择事件
    getboxValue2(e, item) {
      if (e.target.checked) {
        this.chooseMission2List.push(item);
      } else {
        for (let i = 0; i < this.chooseMission2List.length; i++) {
          if (this.chooseMission2List[i].taskId === item.taskId) {
            this.chooseMission2List.splice(i, 1);
            break;
          }
        }
      }
      // console.log(this.chooseMission2List);
    },
    // 创建周报本周关联任务取消事件
    onclose2() {
      this.addWeeklyDto.nextweektastList = [];
      this.chooseMission2 = false;
    },
    delBtn2(item) {
      for (let i = 0; i < this.chooseMission2List.length; i++) {
        if (this.chooseMission2List[i].taskId === item.taskId) {
          this.chooseMission2List.splice(i, 1);
        }
      }
    },
    // 新增周报审核人选择事件
    getboxValue5(e, item) {
      if (e.target.checked) {
        if (this.addWeeklyDto.weeklycheckedList.length !== 0) {
          this.addWeeklyDto.weeklycheckedList.splice(0, 1);
          this.chooseMission5List.push(item);
        }
        if (this.chooseMission5List.length !== 0) {
          this.chooseMission5List.splice(0, 1);
        }
        this.addWeeklyDto.weeklycheckedList.push(item.userId);
        this.chooseMission5List.push(item);
      }
      // console.log(this.chooseMission5List);
    },
    // 新增周报审核人搜索事件
    async addSearchShr() {
      const {data} = await getSelectAllReviewerUser({departmentIdList: JSON.parse(sessionStorage.getItem('departmentIdList')), userName: this.addSearchShrName});
      for (let i = 0; i < data.length; i++) {
        if (data[i] === null) {
          data.splice(i, 1);
          i--;
        }
      }
      this.examinerList = data;
    },
    // 新增本周关联任务搜索事件
    async searchEvent1() {
      const {data} = await getSelectAllTask({userId: parseInt(sessionStorage.getItem('userid')), taskName: this.searchName1});
      this.relationTask1 = data;
      this.chooseMission1List.forEach(item => {
        this.relationTask1.forEach(i => {
          if (item.taskId === i.taskId) {
            i.checked = true;
          }
        });
      });
    },
    // 新增下周关联任务搜索事件
    async searchEvent2() {
      const {data} = await getSelectAllTask({userId: parseInt(sessionStorage.getItem('userid')), taskName: this.searchName2});
      this.relationTask2 = data;
      this.chooseMission2List.forEach(item => {
        this.relationTask2.forEach(i => {
          if (item.taskId === i.taskId) {
            i.checked = true;
          }
        });
      });
    },
    // 新增审核人按钮
    async examinerBtn() {
      const res = await getSelectAllReviewerUser({departmentIdList: JSON.parse(sessionStorage.getItem('departmentIdList'))});
      if (res.code === 200) {
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i] === null) {
            res.data.splice(i, 1);
            i--;
          }
        }
      }
      this.examinerList = res.data;
      this.chooseMissioner = true;
      // console.log(this.examinerList);
    },
    // 点击盒子选中里面单选框
    clickInput(e) {
      e.currentTarget.lastElementChild.click();
    },
    inputClickEvent(e, item) {
      e.stopPropagation();
    },
    // 创建周报按钮
    async addEditBtn() {
      this.addWeeklyDto = { // 新增周报
        nextweektastList: [], // 下周关联任务
        wcreateid: parseInt(sessionStorage.getItem('userid')), // 创建人
        weeklycheckedList: [], // 审核人列表
        weektastList: [], // 本周关联任务
        wname: '', // 标题
        wplan: '', // 下周工作计划
        wsummary: '' // 本周工作总结
      };
      this.chooseMission1List = [];
      this.chooseMission2List = [];
      this.chooseMission5List = [];
      this.getDate();
      const {data} = await getSelectPersonal({id: parseInt(sessionStorage.getItem('userid'))});
      // console.log(data);
      this.addUserName = data.name;
      this.addUserUrl = data.url;
      this.establishShow = true;
    },
    // 新增周报提交
    async changeEdit() {
      this.chooseMission1List.forEach(item => {
        this.addWeeklyDto.weektastList.push(item.taskId);
      });
      this.chooseMission2List.forEach(item => {
        this.addWeeklyDto.nextweektastList.push(item.taskId);
      });
      // console.log(this.addWeeklyDto);
      if (this.addWeeklyDto.wname === '') {
        return this.$message({
          showClose: true,
          message: '周报名称不能为空！',
          type: 'warning'
        });
      }
      if (this.addWeeklyDto.wplan === '') {
        return this.$message({
          showClose: true,
          message: '下周工作计划不能为空！',
          type: 'warning'
        });
      }
      if (this.addWeeklyDto.wsummary === '') {
        return this.$message({
          showClose: true,
          message: '本周工作总结不能为空！',
          type: 'warning'
        });
      }
      const res = await addWeekly(this.addWeeklyDto);
      // console.log(res);
      if (res.code === 200) {
        // 提示成功
        this.$message({
          showClose: true,
          message: '新增成功！',
          type: 'success'
        });
        // 刷新列表
        this.page.page = 1;
        this.getSelectWeekly();
        this.establishShow = false;
      } else {
        // 提示失败
        this.$message({
          showClose: true,
          message: '新增失败，请稍后重试！',
          type: 'error'
        });
      }
    },
    // 新增周报取消
    canclecreate() {
      this.establishShow = false;
      this.addWeeklyDto = { // 新增周报
        nextweektastList: [], // 下周关联任务
        wcreateid: 0, // 创建人
        weeklycheckedList: [], // 审核人列表
        weektastList: [], // 本周关联任务
        wname: '', // 标题
        wplan: '', // 下周工作计划
        wsummary: '' // 本周工作总结
      };
      this.chooseMission1List = [];
      this.chooseMission2List = [];
      this.chooseMission5List = [];
    },

    // 编辑周报弹层按钮
    editShowBtn() {
      this.updateWeeklyDto = { // 编辑周报
        id: this.WeeklyDetails.id, // 周报id
        nextweektastList: [], // 下周关联任务
        weeklycheckedList: [], // 审核人
        weektastList: [], // 本周关联任务
        wname: this.WeeklyDetails.weeklyName, // 标题
        wplan: this.WeeklyDetails.plan, // 下周工作计划
        wsummary: this.WeeklyDetails.summary // 本周工作总结
      };
      this.chooseMission5List1 = this.WeeklyDetails.reviewerVo.slice(); // 审核人
      this.chooseMission3List = this.WeeklyDetails.weekList.slice(); // 本周关联任务
      this.chooseMission4List = this.WeeklyDetails.nextWeekList.slice(); // 下周关联任务
      this.createUrl = this.WeeklyDetails.createUrl; // 提交人头像
      this.createName = this.WeeklyDetails.createName; // 提交人头像
      this.getDate();
      this.editShow = true;
      // console.log(this.updateWeeklyDto);
      // console.log(this.chooseMission5List1);
      // console.log(this.chooseMission3List);
      // console.log(this.chooseMission4List);
    },
    // 查询编辑周报本周关联任务
    async chooseMissionBtn3() {
      this.searchName3 = '';
      const {data} = await getSelectAllTask({userId: parseInt(sessionStorage.getItem('userid'))});
      this.relationTask3 = data;
      this.chooseMission3List.forEach(item => {
        this.relationTask3.forEach(i => {
          if (item.taskId === i.taskId) {
            i.checked = true;
          }
        });
      });
      // console.log(this.relationTask3);
      this.chooseMission3 = true;
    },
    // 查询编辑周报下周关联任务
    async chooseMissionBtn4() {
      this.searchName4 = '';
      const {data} = await getSelectAllTask({userId: parseInt(sessionStorage.getItem('userid'))});
      this.relationTask4 = data;
      this.chooseMission4List.forEach(item => {
        this.relationTask4.forEach(i => {
          if (item.taskId === i.taskId) {
            i.checked = true;
          }
        });
      });
      // console.log(this.relationTask4);
      this.chooseMission4 = true;
    },
    // 编辑周报本周关联任务选择事件
    getboxValue3(e, item) {
      if (e.target.checked) {
        this.chooseMission3List.push(item);
      } else {
        for (let i = 0; i < this.chooseMission3List.length; i++) {
          if (this.chooseMission3List[i].taskId === item.taskId) {
            this.chooseMission3List.splice(i, 1);
            break;
          }
        }
      }
    },
    // 编辑周报本周关联任务取消事件
    onclose3() {
      this.updateWeeklyDto = { // 编辑周报
        id: this.WeeklyDetails.id, // 周报id
        nextweektastList: [], // 下周关联任务
        weeklycheckedList: [], // 审核人
        weektastList: [], // 本周关联任务
        wname: this.WeeklyDetails.weeklyName, // 标题
        wplan: this.WeeklyDetails.plan, // 下周工作计划
        wsummary: this.WeeklyDetails.summary // 本周工作总结
      };
      this.chooseMission5List1 = this.WeeklyDetails.reviewerVo.slice(); // 审核人
      this.chooseMission3List = this.WeeklyDetails.weekList.slice(); // 本周关联任务
      this.chooseMission4List = this.WeeklyDetails.nextWeekList.slice(); // 下周关联任务
      this.getDate();
      this.chooseMission2 = false;
    },
    delBtn3(item) {
      for (let i = 0; i < this.chooseMission3List.length; i++) {
        if (this.chooseMission3List[i].taskId === item.taskId) {
          this.chooseMission3List.splice(i, 1);
        }
      }
    },
    // 编辑周报下周关联任务选择事件
    getboxValue4(e, item) {
      if (e.target.checked) {
        this.chooseMission4List.push(item);
      } else {
        for (let i = 0; i < this.chooseMission4List.length; i++) {
          if (this.chooseMission4List[i].taskId === item.taskId) {
            this.chooseMission4List.splice(i, 1);
            break;
          }
        }
      }
    },
    // 编辑周报下周关联任务取消事件
    onclose4() {
      this.updateWeeklyDto = { // 编辑周报
        id: this.WeeklyDetails.id, // 周报id
        nextweektastList: [], // 下周关联任务
        weeklycheckedList: [], // 审核人
        weektastList: [], // 本周关联任务
        wname: this.WeeklyDetails.weeklyName, // 标题
        wplan: this.WeeklyDetails.plan, // 下周工作计划
        wsummary: this.WeeklyDetails.summary // 本周工作总结
      };
      this.chooseMission5List1 = this.WeeklyDetails.reviewerVo.slice(); // 审核人
      this.chooseMission3List = this.WeeklyDetails.weekList.slice(); // 本周关联任务
      this.chooseMission4List = this.WeeklyDetails.nextWeekList.slice(); // 下周关联任务
      this.getDate();
      this.chooseMission2 = false;
    },
    delBtn4(item) {
      for (let i = 0; i < this.chooseMission4List.length; i++) {
        if (this.chooseMission4List[i].taskId === item.taskId) {
          this.chooseMission4List.splice(i, 1);
        }
      }
    },
    // 编辑周报审核人搜索事件
    async editSearchShr() {
      const {data} = await getSelectAllReviewerUser({departmentIdList: JSON.parse(sessionStorage.getItem('departmentIdList'))});
      for (let i = 0; i < data.length; i++) {
        if (data[i] === null) {
          data.splice(i, 1);
          i--;
        }
      }
      this.examinerList1 = data;
    },
    // 编辑本周关联任务搜索事件
    async searchEvent3() {
      const {data} = await getSelectAllTask({userId: parseInt(sessionStorage.getItem('userid')), taskName: this.searchName3});
      this.relationTask3 = data;
      this.chooseMission3List.forEach(item => {
        this.relationTask3.forEach(i => {
          if (item.taskId === i.taskId) {
            i.checked = true;
          }
        });
      });
    },
    // 编辑下周关联任务搜索事件
    async searchEvent4() {
      const {data} = await getSelectAllTask({userId: parseInt(sessionStorage.getItem('userid')), taskName: this.searchName4});
      this.relationTask4 = data;
      this.chooseMission4List.forEach(item => {
        this.relationTask4.forEach(i => {
          if (item.taskId === i.taskId) {
            i.checked = true;
          }
        });
      });
    },
    // 编辑审核人按钮
    async examinerBtn1() {
      const {data} = await getSelectAllReviewerUser({departmentIdList: JSON.parse(sessionStorage.getItem('departmentIdList'))});
      for (let i = 0; i < data.length; i++) {
        if (data[i] === null) {
          data.splice(i, 1);
          i--;
        }
      }
      this.examinerList1 = data;
      if (this.chooseMission5List1.length > 0) {
        this.examinerList1.forEach(item => {
          if (item.userId === this.chooseMission5List1[0].userId) {
            item.checked = true;
          }
        });
      }
      this.chooseMissioner1 = true;
      console.log(this.examinerList1);
      console.log(this.chooseMission5List1);
    },
    // 编辑周报审核人选择事件
    getboxValue6(e, item) {
      this.chooseMission5List1 = [];
      if (e.target.checked) {
        this.chooseMission5List1.push(item);
      } else {
        for (let i = 0; i < this.chooseMission5List1.length; i++) {
          if (this.chooseMission5List1[i].userId === item.userId) {
            this.chooseMission5List1.splice(i, 1);
            break;
          }
        }
      }
      console.log(this.chooseMission5List1);
    },
    // 编辑周报提交
    async changeEdit1() {
      this.chooseMission5List1.forEach(item => {
        this.updateWeeklyDto.weeklycheckedList.push(item.userId);
      });
      this.chooseMission3List.forEach(item => {
        this.updateWeeklyDto.weektastList.push(item.taskId);
      });
      this.chooseMission4List.forEach(item => {
        this.updateWeeklyDto.nextweektastList.push(item.taskId);
      });
      if (this.updateWeeklyDto.wname === '') {
        return this.$message({
          showClose: true,
          message: '周报名称不能为空！',
          type: 'warning'
        });
      }
      if (this.updateWeeklyDto.wplan === '') {
        return this.$message({
          showClose: true,
          message: '下周工作计划不能为空！',
          type: 'warning'
        });
      }
      if (this.updateWeeklyDto.wsummary === '') {
        return this.$message({
          showClose: true,
          message: '本周工作总结不能为空！',
          type: 'warning'
        });
      }
      const res = await updateWeekly(this.updateWeeklyDto);
      // console.log(res);
      if (res.code === 200) {
        // 提示成功
        this.$message({
          showClose: true,
          message: '编辑成功！',
          type: 'success'
        });
        // 刷新列表
        this.getSelectWeekly();
        const {data} = await getSelectWeeklyAll({weelyId: this.weeklyNowId});
        this.WeeklyDetails = data;
        this.editShow = false;
      } else {
        // 提示失败
        this.$message({
          showClose: true,
          message: '编辑失败，请稍后重试！',
          type: 'error'
        });
      }
    },
    // 编辑周报取消
    canclecreate1() {
      this.editShow = false;
    },

    // 获取当前年月日
    getDate() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds()
      };

      const newmonth = date.month > 10 ? date.month : '0' + date.month;
      const newday = date.date > 10 ? date.date : '0' + date.date;
      const newminutes = date.minutes < 10 ? '0' + date.minutes : date.minutes;
      const newseconds = date.seconds < 10 ? '0' + date.seconds : date.seconds;
      this.value =
        date.year +
        '-' +
        newmonth +
        '-' +
        newday +
        ' ' +
        date.hours +
        ':' +
        newminutes +
        ':' +
        newseconds;
    }
  }
};
</script>

<style lang="less" scoped>
.weekreport {
  padding: 20px;
  .topstatus {
    position: relative;
    width: 100%;
    height: 40px;
    margin: 0 0 20px 0;
    display: flex;

    .box2 {
      width: 255px;
      height: 32px;
      background: #ffffff;
      border-radius: 3px;
      border: 1px solid #f1f4ff;
    }
    .block {
      width: 255px;
      height: 32px;
      background: #ffffff;
      border-radius: 3px;
      border: 1px solid #f1f4ff;
      margin: 0 30px;
      .blockPicker {
        width: 100%;
        height: 100%;
      }
    }
    .check {
      cursor: pointer;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      width: 85px;
      height: 35px;
      background: #2fc0e0;
      border-radius: 4px;
      box-shadow: 0 0 5px #2fc0e0;
      margin-top: 5px;
    }
    .check1 {
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      width: 85px;
      height: 35px;
      background: #2fc0e0;
      border-radius: 4px;
      box-shadow: 0 0 5px #2fc0e0;
      margin-top: 5px;
    }
  }
  .bottominfo {
    width: 100%;
    // height: 600px;
    display: flex;
    justify-content: space-between;
    .lefttable {
      width: 45%;
      height: 819px;
      // background-color: #f1f5ff;
      background-color: #fff;
      box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
      border-radius: 8px;
      color: #555;
      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        box-shadow: 1px 1px 3px #d7d7d7;
      }
      p {
        margin: 0;
      }
    }
    .rightinfo {
      width: 63%;
      height: 819px;
      flex: 1;
      background-color: #fff;
      box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
      border-radius: 8px;
      .timechoose {
        width: 100%;
        height: 55px;
        text-align: center;
        line-height: 55px;
        color: #333;
        font-size: 16px;
        background-color: #f1f5ff;
        // box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
        position: relative;
        .btnbox {
          position: absolute;
          right: 20px;
          top: 0;
          .cancle,
          .edit {
            cursor: pointer;
            width: 100px;
            height: 35px;
            background-color: #2fc0e0;
            color: #fff;
            font-size: 16px;
            border-radius: 5px;
            margin: 0 10px;
            // box-shadow: 0 0 5px #2fc0e0;
          }
        }
      }
      .weekreportinfoBox {
        font-size: 14px;
        color: #999;
        text-align: center;
        margin-top: 20px;
      }
      .weekreportinfo {
        padding: 20px;
        width: 100%;
        height: calc(100% - 80px);
        background-color: #fff;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: auto;
        .topinfo {
          position: relative;
          width: 100%;
          table {
            width: 100%;
            font-size: 12px;
            color: #333;
            border-left: 1px solid #f1f4ff;
            border-top: 1px solid #f1f4ff;
            tr {
              td {
                text-align: center;
                height: 80px;
                border-right: 1px solid #f1f4ff;
                border-bottom: 1px solid #f1f4ff;
                input {
                  border: none;
                  outline: none;
                  transition: all 0.3s;
                  height: 30px;
                  border-radius: 5px;
                }
                .status {
                  position: absolute;
                  right: 0;
                  top: 0;
                  width: 20%;
                  height: 120px;
                  border: 1px solid #f1f4ff;
                  text-align: center;
                  line-height: 120px;
                  .statusinfo {
                    color: #555;
                  }
                  .statusinfo::before {
                    display: inline-block;
                    content: "";
                    width: 10px;
                    height: 10px;
                    border-radius: 10px;
                    background: #555;
                    box-shadow: 0 0 3px #555;
                  }
                }
                .uper {
                  height: 100px;
                  display: flex;
                  align-items: center;
                  .uperintro {
                    margin-left: 20px;
                  }
                  .uperinfo {
                    height: 100%;
                    margin-left: 10px;
                    position: relative;
                    padding-top: 10px;
                    box-sizing: border-box;
                    img {
                      width: 45px;
                      height: 45px;
                      position: relative;
                      box-shadow: 1px 1px 3px #d7d7d7;
                      border-radius: 50%;
                      cursor: pointer;
                    }
                    p {
                      margin: 0;
                    }
                  }
                }
              }
            }
          }
        }
        .discreaption {
          width: 100%;
          text-align: left;
          position: relative;
          .distit {
            margin-top: 30px;
            margin-bottom: 10px;
            font-size: 14px;
            color: #333;
          }
          .disbox {
            width: 100%;
            padding: 20px;
            font-size: 14px;
            box-sizing: border-box;
            color: #555;
            border: 1px solid #f1f4ff;
          }
          td:focus-within {
            box-shadow: inset 0px 1px 4px 0px #2fc0e0,
              inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
              inset -1px 0px 4px 0px #2fc0e0;
          }
        }
        .weekmission {
          width: 100%;
          text-align: left;
          position: relative;
          .distit {
            margin-top: 30px;
            margin-bottom: 15px;
            font-size: 14px;
            color: #333;
          }
          .plus {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 10px;
            background-color: #e8f8fb;
            font-size: 20px;
            color: #2fc0e0;
            cursor: pointer;
            position: absolute;
            left: 118px;
            top: 3px;
          }
          .disbox {
            width: 100%;
            font-size: 14px;
            color: #555;
            font-weight: 400;
            display: flex;
            margin-bottom: 10px;
            box-sizing: border-box;
            justify-content: space-between;
            .missioninfo {
              width: 100%;
              height: 75px;
              padding: 15px 20px 10px 20px;
              border: 1px solid #f1f4ff;
              display: flex;
              justify-content: space-between;
              .leftname {
                flex: 1;
                margin: 0;
                p {
                  padding-top: 3px;
                  font-size: 14px;
                  color: #555;
                  margin: 0;
                }
              }
              .righttime {
                margin: 0;
                text-align: right;
                div {
                  margin-top: 5px;
                }
                p {
                  margin-top: 10px;
                }
              }
            }
            .btn {
              cursor: pointer;
              width: 8%;
              height: 75px;
              padding: 12.5px 0;
              border: 1px solid #f1f4ff;
              background-image: url("../../assets/canclecontact.png");
              background-repeat: no-repeat;
              background-size: 25px;
              background-position: center;
              transition: all 0.3s;
              margin-left: 10px;
            }
            .btn:hover {
              background: #6c59cd;
              background-image: url("../../assets/cancontact.png");
              background-repeat: no-repeat;
              background-size: 25px;
              background-position: center;
            }
          }
        }
        .confirmcalcle {
          width: 100px;
          height: 50px;
          margin: 30px auto;
          display: flex;
          justify-content: space-between;
          button {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 50px;
            border-radius: 5px;
            cursor: pointer;
          }
          .confirmup {
            background: #ffd167;
            color: white;
          }
        }
      }
    }
  }
  /deep/.el-dialog__wrapper {
    .rightinfo {
      position: relative;
      height: 80vh;
      overflow: hidden;
      // width: 100%;
      // box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
      border-radius: 8px;
      .timechoose {
        width: 100%;
        height: 80px;
        background-color: #f1f5ff;
        // box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
        .timechooser {
          width: 35%;
          height: 100%;
          margin: auto;
          display: flex;
          font-size: 16px;
          color: #333;
          justify-content: space-around;
          align-items: center;
        }
      }
      .btnbox1 {
        width: 100%;
        height: 80px;
        background-color: #fff;
        .btnbox {
          position: absolute;
          right: calc(50% - 135px);
          bottom: 25px;
          .cancle {
            cursor: pointer;
            width: 100px;
            height: 40px;
            background-color: #e8f8fb;
            color: #2fc0e0;
            font-size: 16px;
            border-radius: 5px;
            margin-right: 70px;
            box-shadow: 0 0 5px #e8f8fb;
          }
          .edit {
            cursor: pointer;
            width: 100px;
            height: 40px;
            background-color: #2fc0e0;
            color: #fff;
            font-size: 16px;
            border-radius: 5px;
            box-shadow: 0 0 5px #2fc0e0;
          }
        }
      }
      .weekreportinfo {
        padding: 15px 23px;
        width: 100%;
        height: calc(100% - 160px);
        background-color: #fff;
        box-sizing: border-box;
        overflow-y: auto;
        .topinfo {
          position: relative;
          width: 100%;
          table {
            width: 100%;
            border-left: 1px solid #f1f4ff;
            border-top: 1px solid #f1f4ff;
            tr {
              td {
                text-align: center;
                height: 80px;
                border-right: 1px solid #f1f4ff;
                border-bottom: 1px solid #f1f4ff;
                input {
                  border: none;
                  outline: none;
                  transition: all 0.3s;
                  height: 30px;
                  border-radius: 5px;
                }
                .status {
                  position: absolute;
                  right: 0;
                  top: 0;
                  width: 20%;
                  height: 120px;
                  border: 1px solid #f1f4ff;
                  text-align: center;
                  line-height: 120px;
                  .statusinfo {
                    color: #555;
                  }
                  .statusinfo::before {
                    display: inline-block;
                    content: "";
                    width: 10px;
                    height: 10px;
                    border-radius: 10px;
                    background: #555;
                    box-shadow: 0 0 3px #555;
                  }
                }
                .uper {
                  height: 100px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  div {
                    display: inline-block;
                  }
                  .uperinfo {
                    height: 100%;
                    padding-top: 10px;
                    box-sizing: border-box;
                    margin-left: 10px;
                    position: relative;
                    img {
                      width: 45px;
                      height: 45px;
                      position: relative;
                      box-shadow: 1px 1px 3px #d7d7d7;
                      border-radius: 50%;
                      cursor: pointer;
                    }
                    p {
                      margin: 0;
                    }
                  }
                }
              }
              td:focus-within {
                box-shadow: inset 0px 1px 4px 0px #2fc0e0,
                  inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
                  inset -1px 0px 4px 0px #2fc0e0;
              }
            }
          }
        }
        .discreaption {
          width: 100%;
          text-align: left;
          box-sizing: border-box;
          position: relative;
          .distit {
            margin-top: 30px;
            margin-bottom: 10px;
            font-size: 14px;
            color: #333;
          }
          .disbox {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            font-size: 14px;
            color: #555;
            font-weight: 400;
            border: 1px solid #f1f4ff;
            .btn {
              cursor: pointer;
              width: 8%;
              height: 75px;
              border: 1px solid #f1f4ff;
              background-image: url("../../assets/canclecontact.png");
              background-repeat: no-repeat;
              background-size: 25px;
              background-position: center;
              transition: all 0.3s;
            }
            .btn:hover {
              background: #6c59cd;
              background-image: url("../../assets/cancontact.png");
              background-repeat: no-repeat;
              background-size: 25px;
              background-position: center;
            }
          }
        }
        .weekmission {
          text-align: left;
          position: relative;
          .distit {
            margin-top: 30px;
            margin-bottom: 10px;
            font-size: 14px;
            color: #333;
          }
          .plus {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 10px;
            background-color: #e8f8fb;
            font-size: 20px;
            color: #2fc0e0;
            cursor: pointer;
            position: absolute;
            left: 118px;
            top: 3px;
          }
          .disbox {
            width: 100%;
            font-size: 14px;
            box-sizing: border-box;
            color: #555;
            font-weight: 400;
            display: flex;
            box-sizing: border-box;
            justify-content: space-between;
            margin-bottom: 10px;
            .missioninfo {
              width: 100%;
              height: 75px;
              padding: 15px 20px 10px 20px;
              border: 1px solid #f1f4ff;
              display: flex;
              justify-content: space-between;
              .leftname {
                p {
                  margin-top: 10px;
                  margin-bottom: 5px;
                }
              }
              .righttime {
                margin-top: 10px;
                text-align: right;
              }
            }
            .btn {
              width: 8%;
              height: 75px;
              padding: 12.5px 0;
              border: 1px solid #f1f4ff;
              text-align: center;
              line-height: 85px;
              margin-left: 10px;
              img {
                width: 25px;
                height: 25px;
              }
            }
          }
        }
        .confirmcalcle {
          width: 360px;
          height: 50px;
          margin: 40px auto;
          display: flex;
          justify-content: space-between;
          button {
            width: 40%;
            height: 100%;
            text-align: center;
            line-height: 50px;
            border-radius: 5px;
            cursor: pointer;
          }
          .confirmup {
            background: #ffd167;
            color: white;
          }
          .backup {
            background: #fff5df;
            color: #ffd167;
          }
        }
      }
    }
    .el-dialog {
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        padding: 0;
        .diaheader {
          width: 100%;
          height: 55px;
          background: #f1f5ff;
          text-align: center;
          line-height: 55px;
          color: #333;
          font-weight: bold;
          font-size: 18px;
        }
        .searchbox {
          .inputborder {
            margin: 20px auto;
            width: calc(100% - 60px);
            height: 50px;
            // background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
            border: 1px solid #ccc;
            border-radius: 25px;
            position: relative;
            .search {
              outline: none;
              width: calc(100% - 10px);
              height: 40px;
              position: relative;
              border: 2px solid transparent;
              border-radius: 25px;
              background-clip: padding-box;
              text-align: center;
            }
          }
          .icon {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #2fc0e0;
            border-radius: 50%;
            color: #fff;
            position: absolute;
            right: 5px;
            top: 5px;
          }
        }
        .diacontent {
          width: 100%;
          height: 420px;
          overflow-y: auto;
          ul {
            width: 100%;
            li {
              width: 100%;
              padding: 10px 20px 10px 30px;
              display: inline-block;
              border-bottom: 1px solid #f2f2f2;
              min-height: 60px;
              line-height: 60px;
              margin-bottom: 5px;
              background-color: #fff;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              position: relative;
              .missioninfo {
                width: 95%;
                height: 100%;
                margin: 0;
                // background-color: #fff;
                display: flex;
                justify-content: space-between;
                .leftname {
                  width: 70%;
                  height: 100%;
                  // background-color: #fff;
                  text-align: left;
                  p {
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    color: #555;
                    // background-color: #fff;
                    margin: 0;
                  }
                }
                .righttime {
                  width: 30%;
                  height: 100%;
                  // background-color: #fff;
                  text-align: right;
                  p {
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    color: #555;
                    margin: 0;
                    // background-color: #fff;
                  }
                  span {
                    font-size: 12px;
                    color: #555;
                    margin: 0;
                    // background-color: #fff;
                  }
                }
              }
              img {
                width: 45px;
                height: 45px;
                border-radius: 50%;
              }
              .memberName {
                margin: 0 20px;
                color: #111;
                font-size: 14px;
                font-weight: bold;
              }
              .checkBoxs {
                width: 25px;
                height: 25px;
                position: absolute;
                right: 20px;
              }
              div {
                // background: #f2f2f2;
                width: 100px;
                height: 40px;
                margin: 0 15px;
                border-radius: 11px;
                text-align: center;
                line-height: 40px;
                color: #555;
                font-size: 14px;
              }
              .first {
                background: #ffd167;
                color: #fff;
              }
            }
            li:hover {
              background: rgb(219, 219, 219);
            }
          }
        }
      }
    }
  }
  .DioBox {
    .DiaTopBox {
      position: relative;
      height: 55px;
      text-align: center;
      line-height: 55px;
      font-size: 16px;
      color: #333;
      background-color: #f1f5ff;
      .closeBtn {
        position: absolute;
        right: 10px;
        top: calc(50% - 6px);
      }
    }
    .DiaBodyBox {
      width: 80%;
      // height: 166px;
      font-size: 14px;
      color: #333;
      margin: 0 auto;
      border: none;
      p {
        text-align: left;
      }
      .disbox {
        width: 90%;
        height: 126px;
        padding: 30px;
        font-size: 14px;
        color: #555;
        font-weight: 400;
        text-align: center;
        box-sizing: border-box;
        // border: 1px solid #f1f4ff;
        border: none;
        outline: none;
      }
    }
    .btnbox {
      box-sizing: border-box;
      border: none;
      height: 76px;
      .cancle {
        cursor: pointer;
        width: 100px;
        height: 35px;
        background-color: #e8f8fb;
        color: #2fc0e0;
        font-size: 16px;
        border-radius: 5px;
        margin: 20px 60px 0 0;
        box-shadow: 0 0 5px #e8f8fb;
      }
      .edit {
        cursor: pointer;
        width: 100px;
        height: 35px;
        background-color: #2fc0e0;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
        margin-top: 20px;
        box-shadow: 0 0 5px #2fc0e0;
        margin-top: 20px;
      }
    }
  }
  .ingstatus {
    color: #ffd167 !important;
  }
  .ingstatus::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 3px;
    background: #ffd167;
    box-shadow: 0 0 3px #ffd167;
  }
  .nonestatus {
    color: #555 !important;
  }
  .nonestatus::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #555;
    margin-right: 3px;
    box-shadow: 0 0 3px #555;
  }
  .completestatus {
    color: #3ea528 !important;
  }
  .completestatus::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3ea528;
    margin-right: 3px;
    box-shadow: 0 0 3px #3ea528;
  }
  .completestatus1 {
    color: #c03d3d !important;
  }
  .completestatus1::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c03d3d;
    margin-right: 3px;
    box-shadow: 0 0 3px #c03d3d;
  }
  .el-pagination {
    margin: 20px auto;
    padding-bottom: 20px;
    /deep/.btn-prev {
      width: 32px;
      height: 32px;
      background-color: transparent;
    }
    /deep/.btn-next {
      width: 32px;
      height: 32px;
      background-color: transparent;
    }
  }
  /deep/.el-icon-arrow-left:before {
    font-size: 20px;
    color: #555555;
  }
  /deep/.el-icon-arrow-right:before {
    font-size: 20px;
    color: #555555;
  }
  /deep/.el-pager li {
    width: 32px;
    height: 32px;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    line-height: 32px;
    border-radius: 50% !important;
    background-color: transparent !important;
  }
  /deep/ input:focus {
    //获取焦点
    outline: 1px solid #51c9ff; //边框不用border，用outline
    background: rgba(3, 16, 28, 0); //背景色
  }
  /deep/.el-pager li {
    width: 32px;
    height: 32px;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    line-height: 32px;
    border-radius: 50% !important;
    background-color: #faf9ff !important;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%) !important;
    color: #ffffff !important;
    box-shadow: 0px -1px 5px #1160cf, 0px 1px 5px #cd06bf;
  }
}
</style>
